<template>
<div id="roleAdd">
    <Modal v-model="role.roleAddModalSta" title="新增角色" :loading="loading" :closable="false" @on-ok="roleAddOk" @on-cancel="roleCancel">
        <Row>
            <Col :span="20">
            <Form ref="roleAddForm" :model="roleAddForm" :rules="roleAddRule" label-position="right" :label-width="100">
                <FormItem label="角色名:" prop="name">
                    <Input v-model="roleAddForm.name" placeholder="请输入角色名"></Input>
                </FormItem>
            </Form>
            </Col>
        </Row>
    </Modal>
</div>
</template>
<script>
import Vue from 'vue';
import {
    Modal,
    Row,
    Col,
    Form,
    FormItem,
    Input,
    Message
} from 'iview'
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations
} from 'vuex'
export default {
    name: 'roleAdd',
    data() {
        //确认密码
        const verifyPasswordRuleFn = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请确认新密码'))
            } else if (value != this.roleAddForm.password) {
                callback(new Error('确认密码和密码不一致'));
            } else {
                callback();
            }
        }
        return {
            loading: true,
            //表单
            roleAddForm: {
                name: ''
            },
            //规则
            roleAddRule: {
                name: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }]
            }
        };
    },
    created() {},
    mounted() {},
    computed: {
        ...mapState({
            role: state => state.role //角色列表数据
        })
    },
    methods: {
        ...mapMutations([
            'roleAddModalMut', //新增角色模态框状态
            'roleAddMut' //把新角色添加到角色列表
        ]),
        //提交
        roleAddOk() {
            let _self = this;
            this.$refs['roleAddForm'].validate((valid) => {
                if (valid) {
                    setTimeout(() => {
                        let obj = this.$qs.stringify({
                            name: this.roleAddForm.name
                        });
                        //根据用户id获取用户角色
                        this.$axios.post('/acl_role/addRole', obj).then(res => {
                            _self.roleAddMut({
                                state: res.data
                            }); //把新增数据追加到角色列表里面
                            _self.roleAddModalMut({
                                state: false
                            }); //关闭模态框
                            this.$refs['roleAddForm'].resetFields(); //清空表单
                            _self.$Message.success('新增角色成功'); //提示信息
                        });
                    }, 1000);
                } else {
                    //动画
                    this.loading = false;
                    this.$nextTick(() => {
                        this.loading = true;
                    });
                }
            })
        },
        //取消
        roleCancel() {
            this.$refs['roleAddForm'].resetFields();
        }
    },
    components: {
        Modal,
        Row,
        Col,
        Form,
        FormItem,
        Input,
        Message
    }
}
</script>
